<template>
	<view class="page">
		<view class="summary-condainer">
			<!-- 用户信息 -->
			<view class="user-info">
				<image :src="photo" mode="widthFix" class="photo" />
				<view class="info">
					<text class="username">{{name}}</text>
					<text class="dept">隶属部门：{{deptName}}</text>
				</view>
			</view>
			<view class="date">{{date}}</view>
		</view>

		<view class="result-container">
			<!-- 左边的时钟加一条竖线 -->
			<view class="left">
				<van-icon name="clock-o" />
				<van-icon name="clock-o" />
				<view class="line"></view>
			</view>
			<!-- 右边的内容区域 -->
			<view class="right">
				<view class="row">
					<text class="start">上班（时间 {{ attendanceTime }}）</text>
				</view>

				<view class="row">
					<text class="checkin-time">签到时间（{{ checkinTime }}）</text>
					<van-tag type="success" round size="medium" v-if="status == '正常'">正常</van-tag>
					<van-tag type="warning" round size="medium" v-if="status == '迟到'">迟到</van-tag>
				</view>

				<view class="row">
					<van-icon name="map-marked" />
					<text class="desc">{{ address }}</text>
					<van-tag type="success" round size="medium" v-if="risk == '低风险'">低风险</van-tag>
					<van-tag type="warning" round size="medium" v-if="risk == '中风险'">中风险</van-tag>
					<van-tag type="danger" round size="medium" v-if="risk == '高风险'">高风险</van-tag>
				</view>

				<view class="row">
					<van-icon name="friends" />
					<text class="desc">身份验证</text>
					<van-tag type="success" round size="medium">已通过</van-tag>
				</view>

				<view class="row">
					<text class="end">下班（时间 {{ closingTime }}）</text>
				</view>
			</view>
		</view>

		<!-- 签到统计区域 -->
		<view class="checkin-report">
			<image src="../../static/checkin-success.png" mode="widthFix" class="big-icon"></image>
			<view class="report-title">
				<text class="days">{{ checkinDays }}</text>
				<text class="unit">天</text>
			</view>
			<view class="sub-title"><van-divider contentPosition="center" font-size="18">累计签到</van-divider></view>
			<view class="calendar-container">
				<view class="calendar" v-for="one in weekCheckin" :key="one">
					<image src="../../static/icon-9.png" mode="widthFix" class="calendar-icon" v-if="one.type != '节假日'"></image>
					<image src="../../static/icon-10.png" mode="widthFix" class="calendar-icon" v-if="one.type == '节假日'"></image>
					<text class="day">{{ one.day }}</text>
					<van-tag type="success" round size="medium" v-if="one.status == '正常'">正常</van-tag>
					<van-tag type="warning" round size="medium" v-if="one.status == '迟到'">迟到</van-tag>
					<van-tag type="danger" round size="medium" v-if="one.status == '缺勤'">缺勤</van-tag>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			name: '无名氏',
			photo: 'https://thirdwx.qlogo.cn/mmopen/vi_32/khD9uibibRyBnzD5X3iahDpibicz8ibHW9dwia5wLXSs0VLrLu2gXJibPXcvQXgZhSqSI2yCSUvfSQUTt6f8kibYVuzQCsA/132',
			deptName: '管理部',
			address: '辽宁省大连市',
			status: '正常',
			risk: '中风险',
			checkinTime: '08:25',
			date: '2020年12月1日',
			attendanceTime: '08:30',
			closingTime: '09:30',
			checkinDays: 201,
			weekCheckin: [
				{ type: '工作日', day: '周一', status: '缺勤' },
				{ type: '工作日', day: '周二', status: '迟到' },
				{ type: '工作日', day: '周三', status: '正常' },
				{ type: '工作日', day: '周四', status: '正常' },
				{ type: '工作日', day: '周五', status: '正常' },
				{ type: '休息日', day: '周六', status: '' },
				{ type: '休息日', day: '周日', status: '' }
			]
		};
	},
	onShow() {
		let that = this;
		that.ajax(this.url.searchTodayCheckin, 'GET', null, function(resp) {
			let result = resp.data.result;
			that.name = result.name;
			that.photo = result.photo;
			that.deptName = result.deptName;
			that.date = result.date;
			that.attendanceTime = result.attendanceTime;
			that.closingTime = result.closingTime;
			that.checkinTime = result.checkinTime;
			that.status = result.status;
			that.risk = result.risk;
			that.address = result.address;
			that.checkinDays = result.checkinDays;
			that.weekCheckin = result.weekCheckin;
		});
	}
};
</script>

<style lang="less">
@import url('checkin_result.less');
</style>
